<!DOCTYPE HTML>
<html>
	<head>
		<title>上下播放图片</title>
		<meta charset="utf-8"/>
		<script src="./move.js"></script>
		<style>
		*{
			margin:0;
			padding:0;
		}
			#div1{
				width:480px;
				height:300px;
				position: relative;
				margin:0 auto;
				overflow: hidden;
			}

			#ul1{
				width:480px;
				height:300px;
				list-style: none;
				position: absolute;
			}
			#ul1 li{
				width:480px;
				height:300px;
			}
			#ol1{
				width:100px;
				height:20px;
				background:#ccc;
				position: absolute;
				top:250px;
				text-align: center;
				right:20px;
				
			}
			#ol1 li{
				width:20px;
				height: 20px;
				float:left;
				list-style:none;
				z-index: 3000;
			}
			.active{
				background:yellow;
			}

		</style>
		<script>
			window.onload=function(){
				
				var oDiv1=document.getElementById('div1');	
				var Ol1=document.getElementById('ol1');		
				var aOli=Ol1.getElementsByTagName('li');
				var Ul1=document.getElementById('ul1');	
				var now=0;
				function tab(){
					for(var j=0;j<aOli.length;j++)
						{
							aOli[j].className="";
						}
						aOli[now].className='active';
						change(Ul1,{top:(-300*now)});
				}
				for(var i=0;i<aOli.length;i++)
				{
					aOli[i].index=i;

					aOli[i].onclick=function()
					{
						now=this.index;
						tab();
					}
					
				}
				function next(){
					now++;
					if(now==5)
						{
							now=0;
						}
					tab();
				}
			var timer=setInterval(next,2000);
			Ul1.onmouseover=function(){
					clearInterval(timer);
				}
			Ul1.onmouseout=function(){
						var timer=setInterval(next,2000);
			}
		}
		</script>
	</head>
	<body>
		<div id="div1">
		
			<ul id="ul1" style="top:0;">
				<li><img src="./film/fj1.jpg"/></li>
				<li><img src="./film/fj2.jpg"/></li>
				<li><img src="./film/fj3.jpg"/></li>
				<li><img src="./film/fj4.jpg"/></li>
				<li><img src="./film/fj5.jpg" /></li>
			</ul>
			<ol id="ol1">
				<li class="active">1</li>
				<li>2</li>
				<li>3</li>
				<li>4</li>
				<li>5</li>
			</ol>
		</div>
	</body>
</html>